<template>
	<!--<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

	<el-dialog title="模板编辑" :visible.sync="dialogFormVisible" class="tmp-dialog">
		<div v-loading="dialogLoading">
			<div>
				<h6 style="margin:0 0 15px 0;">标签</h6>
				<el-tag :key="tag.key" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
					{{tag.name}}
				</el-tag>
				<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
				</el-input>
				<el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签 </el-button>
			</div>
			<div>
				<h6 style="margin:15px 0;">所有标签</h6>
				<div class="all-tag">

					<span v-for="(item,index) in allTags" :class="item.active?'active':''" @click="allTagClick(index)" v-if="initSystemTags.indexOf(item.key)<0">{{item.name}}</span>
				</div>
			</div>

		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
			<el-button type="primary" @click="saveFun()" size="small">保 存</el-button>
		</div>
	</el-dialog>
</template>
<style>
	.el-dialog__body {
		padding: 20px;
	}
	
	.tmp-dialog .button-new-tag,
	.tmp-dialog .input-new-tag {
		margin-left: 10px;
		height: 24px;
		line-height: 22px;
		padding-top: 0;
		padding-bottom: 0;
		width: 80px;
	}
	
	.tmp-dialog .el-tag+.el-tag {
		margin: 0 0 10px 10px;
	}
	
	.all-tag {
		overflow: hidden;
	}
	
	.all-tag span {
		padding: 0 5px;
		border-radius: 3px;
		border: 1px solid #aaa;
		float: left;
		margin: 0 10px 5px 0;
		font-size: 12px;
		cursor: pointer;
	}
	
	.all-tag span.active {
		color: #fff;
		background: #1ba4ff;
		border: 1px solid #1ba4ff;
	}
</style>
<script>
	import pinyin from '../../../static/z39pc/js/pinyin.js'
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import {
		mapState,
		mapActions
	} from 'vuex'
	var initPage = function() {
		//		$('body').on('click','.all-tag span',function(){
		//			$(this).toggleClass('active')
		//		})
	}
	export default {
		name: 'tmpDialog',
		data() {
			return {
				editItem: '',
				dialogFormVisible: false,
				dialogLoading: false,
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				allTags: [],
				projectId:''
			}

		},
		mixins: [taskAndTag, mixinPc],
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				tagitems: state => state.z39.tagitems,
				tagitemDic: state => state.z39.tagitemDic,
				todayTags: state => state.z39.tagtmps,
				
			})
		},
		watch: {
			'tagitems': function() {
				this.allTags = this.tagitems.map(function(item, index, arr) {
					var item1 = Object.assign({}, item)
					item1['active'] = false;
					return item1;
				})
			},
			"allTags": {
				handler() {
					//					console.log('all');
				},
				deep: true,
			},
		},
		created() {
			this.allTags = this.tagitems.map(function(item, index, arr) {
				var item1 = Object.assign({}, item)
				item1['active'] = false
				return item1;
			})
		},
		methods: {
			showDialog: function(item,pid) {
				this.dialogFormVisible = true;
				this.projectId=pid;
				this.editItem = item;
				var arr = item.tmp.split(',');
				var resultArr = [];
				for(var i = 0; i < arr.length; i++) {
					var obj = {
						//						key:item.key,
						name: this.tagitemDic[arr[i]] || '',
						val: arr[i],
						isExsist: true //如果不存在，则请求添加标签的接口

					};
					resultArr.push(obj)
				}
				this.dynamicTags = resultArr;
				this.allTags.forEach(function(item, index, arr) {
					item['active'] = false;
				})
			},
			//所有标签点击
			allTagClick: function(index) {
				//防止重复添加
				var _this = this;
				var hasKey = this.dynamicTags.some(function(item) {
					return item.val == _this.allTags[index].key;
				});
				if(hasKey) {
					this.$message({
						message: '标签已存在',
						type: 'warning'
					});
					return;
				}
				this.allTags[index].active = !this.allTags[index].active;
				var item = {
					val: this.allTags[index].key,
					name: this.allTags[index].name,
					isExsist: true
				}
				if(this.allTags[index]['active']) {

					this.dynamicTags.push(item)
				} else {
					this.dynamicTags = this.dynamicTags.filter(function(item) {
						return item.val != _this.allTags[index].key;
					})
				}
			},
			//保存
			saveFun: function() {
				this.dialogLoading = true;
				var tmpStr = this.dynamicTags;
				var _this = this;
				var tagsTmpStrArr = this.dynamicTags.map(function(item) {
					return item.val;
				});
				var addTagsArr = this.dynamicTags.filter(function(item) {
					return item.isExsist == false;
				});

				addTagsArr = addTagsArr.map(function(item) {
					var item1 = {
						value: '',
						name: item.name,
						key: item.val
					}
					return item1;
				})
				//判断添加的标签key在所有标签里面存不存在，如果存在，则不添加
				var addTagsArrLast = [];
				for(var i = 0; i < addTagsArr.length; i++) {
					var hasKey = false;
					for(var j = 0; j < this.allTags.length; j++) {
						if(this.allTags[j]['key'] == addTagsArr[i]['key']) {
							hasKey = true;
						}
					}
					if(!hasKey) {
						addTagsArrLast.push(addTagsArr[i])
					}
				}
				var params = {
					id: this.editItem.id,
					pid: this.projectId||null,
					count: null,
					type: 1,
					name: this.editItem.name,
					key: this.editItem.key,
					tmp: tagsTmpStrArr.join(',')
				}
				if(addTagsArrLast.length > 0) {
					api.tagitemsAdd({
						tags: addTagsArrLast
					}).then(data => {
						if(data && data.errno == 0) {
							var tagIdArr = data.data;
							var itemsArr = [];
							for(var i = 0; i < tagIdArr.length; i++) {
								itemsArr.push({
									count: null,
									id: tagIdArr[i],
									key: addTagsArrLast[i].key,
									name:addTagsArrLast[i].name,
									position: null,
									type: null,
									value: null
								})
							}
							_this.$store.commit({
								type: "z39/tagitemsAdd",
								tagitems:itemsArr
							});
						} else { //发生错误.
							_this.$message({
								message: data.errmsg,
								type: 'error'
							});
						}
					})
				}
				if(this.editItem.init == 1) {
					api.tagTmpAdd(params).then(data => {
						_this.dialogLoading = false;
						if(data && data.errno == 0) {
							_this.dialogFormVisible=false;
							_this.$message({
								message: '保存成功',
								type: 'success'
							});
							_this.$store.commit({
								type: "z39/updateTagTmps",
								id: data.data.id,
								tmp: params.tmp,
								key: this.editItem.key
							});
						} else { //发生错误.
							_this.$message({
								message: data.errmsg,
								type: 'error'
							});
						}
					})
				} else {
					api.tagTmpPut(params).then(data => {
						_this.dialogLoading = false;
						if(data && data.errno == 0) {
							_this.dialogFormVisible=false;
							_this.$message({
								message: '保存成功',
								type: 'success'
							});
							_this.$store.commit({
								type: "z39/updateTagTmps",
								id: params.id,
								tmp: params.tmp,
								key: this.editItem.key
							});
						} else { //发生错误.
							_this.$message({
								message: data.errmsg,
								type: 'error'
							});
						}
					})
				}
			},
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue.trim();
				if(inputValue) {
					//					防止重复添加
					var valueText = pinyin.pinyin.getCamelChars(inputValue)+pinyin.pinyin.getFullChars(inputValue);
					if(inputValue.length>12){
						this.showNotice('标签长度不能不能超过12个字符', 'warning');
						return;
					}
					if(valueText.length>25){
						valueText=valueText.substring(0,25)
					}
					var hasKey = this.dynamicTags.some(function(item) {
						return item.val == valueText;
					});
					if(!hasKey) {
						this.dynamicTags.push({
							name: inputValue,
							val: valueText,
							isExsist: false
						});
						this.inputVisible = false;
						this.inputValue = '';
					} else {
						this.$message({
							message: '标签已存在',
							type: 'warning'
						});
					}
				}else{
					this.inputVisible = false;
				}

			}
		},
		mounted() {
			initPage();
		}
	}
</script>

<style>

</style>